<template>
  <div>
    <div class="header-cls">
      <div class="content-left">
        <slot name="left">
          <el-button 
            v-if="hasFaultAdd"
            slot="left" 
            type="primary"
            @click="addFaultObjHandle"
            :style="{height: '34px'}"
          >
            {{ $t('faultLibrary.faultObject.createBtn2')}}
          </el-button>
        </slot>
      </div>
      <div class="content-right">

        <el-select 
          v-model="relType" 
          :placeholder="$t('common.placeholder.select')"
          @change="changeRelType"
          :style="{width: '150px', marginRight: '12px'}"
          clearable>
          <el-option
            v-for="item in relOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <CorrelationObjSelect
          v-if="typeof relType === 'string' ? relType.length > 0 : relType != null"
          :style="{marginRight: '12px', width: '150px'}"
          ref="relationObjRef"
          v-model="relIdList" 
          :rel-type="relType"
          :collapse-tag="true"
          :taskProductId="taskProductId"
          @relIdChange="getData"
        />

        <el-input 
          class="search-input"
          :style="{width: '240px'}"
          v-model="faultDesc" 
          :placeholder="$t('common.base.search')"
          prefix-icon="el-icon-search"
          @input="getData">
        </el-input>
      </div>
    </div>
    <!-- 故障对象弹框 -->
    <fault-obj v-model="faultObjDialogVisible" @operateSuc="operateSuc"/>
  </div>
</template>
    
<script>
import { t } from '@src/locales';
import FaultObj from './FaultInformationDialog/FaultObj';
import AuthUtil from '@src/util/auth';
import { getRootWindow } from '@src/util/dom';

// 关联对象选择框
import CorrelationObjSelect from '@src/modules/faultLibrary/components/CorrelationObjSelect';

export default{
  name:'FaultLibraryHeader',
  props: {
    initData: {
      type: Object,
      default: () => ({})
    },
    task: {
      type: Object,
      default: () => ({})
    },
  },
  data(){
    return {
      // 故障对象弹框展示
      faultObjDialogVisible: false,
      // 关联类型 1：产品    2：物料    3：备件
      relType:null,
      // 搜索值
      faultDesc:'',
      // 关联id
      relIdList:[],

      relIdOptions:[]
    }
  },
  computed: {
    taskProductId() {
      return this.task?.products?.map(item => item.id) || [];
    },
    auth() {
      return this.initData?.auths || {};
    },
    hasFaultAdd() {
      return AuthUtil.hasAuth(this.auth, 'FAULT_LIBRARY_ADD')
    },
    /**
    * @description 是否开启云仓灰度
    */
    isCloudWarehouse() {
      const RootWindow = getRootWindow(window)
      return RootWindow.grayAuth?.cloudwarehouse || false
    },
    relOptions() {
      let arr = [{
        label: t('common.base.product'),
        value: 1,
      }, {
        label: t('common.form.type.material'),
        value: 2,
      }, {
        label: t('common.base.sparePart'),
        value: 3,
      }]
      const result = this.isCloudWarehouse ? arr.filter(item => item.value != 3) : arr.filter(item => item.value != 2); 
      return result;
    }
  },
  components:{
    FaultObj,
    CorrelationObjSelect
  },

  mounted(){
    this.getData()
  },
  
  methods: {
    open() {
      if(this.taskProductId.length > 0){
        this.relType = 1
      }
    },
    operateSuc() {
      this.getData()
      this.$emit('updateExpandedNode')
    },
    changeRelType() {
      this.relIdList = []
      this.getData()
    },
    getData(){
      let ids = []
      if (this.relType === 1) {
        ids = this.relIdList.map(i=>i.key)
      } else {
        ids = (this.relIdList || []).map(item => {
          return item?.id;
        })
      }
      // https://yapi.shb.ltd/project/5164/interface/api/52190
      let params = {
        relType: this.relType,
        relIdList: ids,
        enterState: 1,
        faultDesc: this.faultDesc
      }
      this.$emit('getData', params)
    },

    addFaultObjHandle(){
      this.faultObjDialogVisible = true;
    },
    // 清空搜索值
    clearSearchValue() {
      this.relType = null;
      this.relIdList = [];
      this.faultDesc = '';
    }
  }
}
</script>
<style lang="scss" scoped>
.header-cls{
    background:#fff;
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
		.content-right{
			display: flex;
      ::v-deep .search-input .el-input__prefix {
        height: auto;
      }
		}
}
</style>